<template>
  <!-- 客服审核列表 -->
  <view id="check-list">
    <view class="nuter">
      <view :class="tabIndex == 0 ? 'active' : ''" @click="changeTabIndex(0)" data-index="0">待审核</view>
      <view :class="tabIndex == 1 ? 'active' : ''" @click="changeTabIndex(1)" data-index="1">未通过</view>
      <view :class="tabIndex == 2 ? 'active' : ''" @click="changeTabIndex(2)" data-index="2">已通过</view>
    </view>
		<scrollView height1="92vh" :isReloadComplete1="isReloadComplete" :isShowBottomView1="isShowBottomView" :isShowNodata1="isReloadComplete && !isNoData" @downdata="downdata" @updata="updata" @onScroll="onScroll">
			<view v-if="tabIndex === 0">
				<view class="no-data-box" v-if="todo.list.length == 0">
					<image class="no-data" src="../../../static/index/no_data.png">
					</image>
				</view>
				<view v-else>
					<view v-for="(item, index) in todo.list" class="check-item" @click="toDetail(item.id)">
						  <image :src="item.face_img" class="img" v-if="item.face_img.indexOf('https') !== -1"></image>
						  <image :src="vuex_api_HEADER + item.face_img" class="img" v-else></image>
						  <view class="item-info">
						    <view class="item-tips">
						      <image :src="item.face_img" class="icon" v-if="item.face_img.indexOf('https') !== -1"></image>
						      <image :src="vuex_api_HEADER + item.face_img" class="icon" v-else></image>
						      <view>{{ item.lost_type == 0 ? '找亲人' : '帮忙找' }}</view>
						    </view>
						    <view>{{ item.title }}</view>
						    <view class="publish">
						      <view>发布人:{{ item.nickname }}</view>
						      <view>{{ item.lost_time }}</view>
						    </view>
							</view>
					</view>
				</view>
			</view>
			
			<view v-if="tabIndex === 1">
				<view class="no-data-box" v-if="invalid.list.length == 0">
					<image class="no-data" src="../../../static/index/no_data.png">
					</image>
				</view>
				<view v-else>
					<view v-for="(item2, index) in invalid.list" class="check-item">
						<image :src="item2.face_img" class="img"  v-if="item2.face_img.indexOf('https') !== -1"></image>
						<image :src="vuex_api_HEADER + item2.face_img" class="img"  v-else></image>
						<view class="item-info">
						  <view class="item-tips">
						    <image :src="item2.face_img" class="icon" v-if="item2.face_img.indexOf('https') !== -1"></image>
						    <image :src="vuex_api_HEADER + item2.face_img" class="icon" v-else></image>
						    <view>{{ item2.lost_type == 0 ? '找亲人' : '帮忙找' }}</view>
						  </view>
						  <view>{{ item2.title }}</view>
						  <view class="publish">
						    <view>发布人：{{ item2.nickname }}</view>
						    <view>{{ item2.lost_time }}</view>
						  </view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="tabIndex === 2">
				<view class="no-data-box" v-if="pass.list.length == 0">
					<image class="no-data" src="../../../static/index/no_data.png">
					</image>
				</view>
				<view v-else>
					<view v-for="(item3, index) in pass.list" class="check-item">
						<image :src="item3.face_img" class="img" v-if="item3.face_img.indexOf('https') !== -1"></image>
						<image :src="vuex_api_HEADER + item3.face_img" class="img" v-else></image>
						<view class="item-info">
						  <view class="item-tips">
						    <image src="../../../static/index/zjx.png" class="icon"></image>
						    <view>{{ item3.lost_type == 0 ? '找亲人' : '帮忙找' }}</view>
						  </view>
						  <view>{{ item3.title }}</view>
						  <view class="publish">
						    <view>发布人：{{ item3.nickname }}</view>
						    <view>{{ item3.lost_time }}</view>
						  </view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- // 返回顶部 -->
			<selfRoll :active="roll" :left="right" @scrollTo="scrollTo"></selfRoll>
		</scrollView>
  </view>
</template>

<script>
	import scrollView from '../../../components/scroll-view/scroll-view.vue';
	import selfRoll from '../../../components/self-roll/roll.vue';
	
export default {
	components: {
		scrollView,
		selfRoll
	},
  data() {
    return {
      // 待审核
      todo: {
				page: 1,
				size: 10,
				list: [],
				isReloadComplete: false,
				isNoData: true
			},
      // 审核未通过
      invalid: {
				page: 1,
				size: 10,
				list: [],
				isReloadComplete: false,
				isNoData: true
			},
      // 审核通过
      pass: {
				page: 1,
				size: 10,
				list: [],
				isReloadComplete: false,
				isNoData: true
			},
			tabIndex: 0,  //0待审核1未通过2已通过
			isReloadComplete: false,
			isShowBottomView: false,
			isNoData: true,
			iserror: false,
			roll: false, //返回顶部
			right: '80vw', //右侧距离
			systemHeight: 0, //系统高度
    }
  },
  onLoad() {
		this.get_check_list(0);
		this.systemHeight = this.getSystemMsg('windowHeight');
	},
	onShow() {
		this.todo = {
			page: 1,
			size: 10,
			list: [],
			isReloadComplete: false,
			isNoData: true
		};
		// 审核未通过
		this.invalid = {
			page: 1,
			size: 10,
			list: [],
			isReloadComplete: false,
			isNoData: true
		};
		// 审核通过
		this.pass = {
			page: 1,
			size: 10,
			list: [],
			isReloadComplete: false,
			isNoData: true
		};
		this.tabIndex = 0;  //0待审核1未通过2已通过
		this.isReloadComplete = false;
		this.isShowBottomView = false;
		this.isNoData = true;
		this.iserror = false;
		this.roll = false; //返回顶部
		this.right = '80vw'; //右侧距离
		this.systemHeight = 0; //系统高度
		this.get_check_list(0);
	},
  methods: {
		// 获取审核列表
		async get_check_list(index) {
			let self = this;
			this.iserror = true;
			let params = {};
			switch (index) {
				case 0:
					params = {
						type: index,
						page: self.todo.page,
						psize: self.todo.size
					}
				break
				case 1:
					params = {
						type: index,
						page: self.invalid.page,
						psize: self.invalid.size
					}
				break
				case 2:
					params = {
						type: index,
						page: self.pass.page,
						psize: self.pass.size
					}
				break
			}
			const res = await self.$u.api.KF_get_check_list(params);
			if(res.code === 200) {
				switch (index) {
					case 0:
						if(self.todo.page === 1) {
							// 首次加载
							self.todo.list = res.data.data;
							self.todo.page_count = res.data.page_count;
						} else {
							self.todo.list.push(...res.data.data)
						}
					break
					case 1:
						if(self.invalid.page === 1) {
							// 首次加载
							self.invalid.list = res.data.data;
							self.invalid.page_count = res.data.page_count;
						} else {
							self.invalid.list.push(...res.data.data)
						}
					break
					case 2:
						if(self.pass.page === 1) {
							// 首次加载
							self.pass.list = res.data.data;
							self.pass.page_count = res.data.page_count;
						} else {
							self.pass.list.push(...res.data.data)
						}
					break
				}
				this.iserror = true;
			} else {
				this.iserror = true;
			}
		},
    // 点击nav控制下面的展示
    changeTabIndex(index) {
      this.tabIndex = index;
			this.isShowBottomView = false;
			switch (index) {
				case 0:
					this.isReloadComplete = this.todo.isReloadComplete;
					this.isNoData = this.todo.isNoData;
				break
				case 1:
					this.isReloadComplete = this.invalid.isReloadComplete;
					this.isNoData = this.invalid.isNoData;
				break
				case 2:
					this.isReloadComplete = this.pass.isReloadComplete;
					this.isNoData = this.pass.isNoData;
				break
			}
			if(!this.todo.list.length || !this.invalid.list.length || !this.pass.list.length) {
				this.get_check_list(index);
			}
			uni.$emit('goTop', '');
			this.$set(this, 'roll', false);
    },
		// 下拉刷新
		downdata() {
			let self = this;
			this.isShowBottomView = false;
			setTimeout(() => {
				uni.$emit('downdataHD', {
					type: 'down'
				});
				switch (this.tabIndex) {
					case 0:
						self.todo.page = 1;
						self.todo.list = [];
						self.todo.isReloadComplete = false;
						self.todo.isNoData = true;
						self.isReloadComplete = self.todo.isReloadComplete;
						self.isNoData = self.todo.isNoData;
						break
					case 1:
						self.invalid.page = 1;
						self.invalid.list = [];
						self.invalid.isReloadComplete = false;
						self.invalid.isNoData = true;
						self.isReloadComplete = self.invalid.isReloadComplete;
						self.isNoData = self.invalid.isNoData;
						break
					case 2:
						self.pass.page = 1;
						self.pass.list = [];
						self.pass.isReloadComplete = false;
						self.pass.isNoData = true;
						self.isReloadComplete = self.pass.isReloadComplete;
						self.isNoData = self.pass.isNoData;
				}
				self.get_check_list(self.tabIndex);
			}, 1000)
		},
		// 上拉加载
		updata() {
			let self = this;
			this.isShowBottomView = true;
			switch (self.tabIndex) {
				case 0:
					if(self.todo.page < self.todo.page_count) {
						self.todo.page++;
					} else {
						self.todo.isReloadComplete = true;
						self.todo.isNoData = false;
						self.isReloadComplete = self.todo.isReloadComplete;
						self.isNoData = self.todo.isNoData;
						uni.$emit('updataHD', {
							type: 'up'
						});
						this.isShowBottomView = false;
						return 
					}
					break
				case 1:
					if(self.invalid.page < self.invalid.page_count) {
						self.invalid.page++;
					} else {
						self.invalid.isReloadComplete = true;
						self.invalid.isNoData = false;
						self.isReloadComplete = self.invalid.isReloadComplete;
						self.isNoData = self.invalid.isNoData;
						uni.$emit('updataHD', {
							type: 'up'
						});
						this.isShowBottomView = false;
						return 
					}
					break
				case 2:
					if(self.pass.page < self.pass.page_count) {
						self.pass.page++;
					} else {
						self.pass.isReloadComplete = true;
						self.pass.isNoData = false;
						self.isReloadComplete = self.pass.isReloadComplete;
						self.isNoData = self.pass.isNoData;
						uni.$emit('updataHD', {
							type: 'up'
						});
						this.isShowBottomView = false;
						return 
					}
					break
			}
			self.get_check_list(self.tabIndex);
			this.isShowBottomView = false;
		},
		// 进入审核页面
		toDetail(id) {
			uni.navigateTo({
			    url: `examine?id=${id}`
			});
		},
		// 页面滚动
		onScroll(e) {
			// console.log('e.scrollHeight', e, 'this.systemHeight', this.systemHeight)
			if (e.scrollTop > this.systemHeight) {
				this.roll = true;
			} else {
				this.roll = false;
			}
		},
		/*scrollview返回远点*/
		scrollTo() {
			uni.$emit('goTop', '');
		},
		//获取系统参数
		getSystemMsg: function(key) {
			var result = '';
			uni.getSystemInfo({
				success: (res) => {
					if (key === 'windowHeight') {
						result = res.windowHeight;
					}
				}
			});
			return result;
		},
  }
}
</script>

<style lang="scss" scoped>
.nuter {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-content: space-around;
  font-size: 35rpx;
}
.nuter view {
  flex: 1;
  font-size: 30rpx;
  color: #666666;
  text-align: center;
  transition: all 0.5s ease 0.1s;
  background-color: #fff;
}
.active {
  width: 50rpx;
  box-sizing: border-box;
  color: #000;
  border-bottom: 5rpx solid #6adfe9;
  background-color: #f3ffff;
}
swiper-item {
  height: 100%;
  overflow-y: scroll;
}
.swiper-item {
  overflow-y: scroll;
  width: 99.5%;
  height: 99%;
  box-sizing: border-box;
  padding: 1rpx;
}

.check-item {
  display: flex;
  align-items: center;
  padding: 23rpx 32rpx;
  box-shadow: 0px 3px 7px 0px rgba(217, 217, 217, 0.4);
  border-radius: 10rpx;
  .img {
    flex: 0 0 147rpx;
    width: 147rpx;
    height: 143rpx;
    margin-right: 36rpx;
  }
  .item-info {
    .publish {
      display: flex;
      justify-content: space-between;
      color: #8f9091;
      font-size: 18rpx;
      margin-top: 19rpx;
    }
    .item-tips {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffeef0;
      width: 133rpx;
      height: 40rpx;
      color: #ff5b76;
      font-size: 20rpx;
      margin-bottom: 9rpx;
      .icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 7rpx;
      }
    }
  }
}
</style>
